<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css" />
    <script type="text/javascript" src="layui/layui.js" ></script>
    <script type="text/javascript" src="js/jquery-1.12.2.min.js" ></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-row layui-bg-gray" style="height: 100px">
        <div class="layui-col-md2">
        </div>
        <div class="layui-col-md10">
            <span style="font-size: xx-large; color: #393D49; margin-left: 55px; top: 30%">课程管理</span>
        </div>
    </div>

    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal addVideo_btn">添加</a>
            </div>
        </form>
    </blockquote>
    <table class="layui-hide" id="demoCourse" lay-filter="demoCourse"></table>

    <script type="text/html" id="barUpdate">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
<script>
    layui.use(['laypage','form','layer','table','element','slider'],function() {
        var laypage = layui.laypage
            , layer = layui.layer
            , table = layui.table
            , element = layui.element
            , slider = layui.slider
            , form = layui.form


        var tableIns = table.render({
            elem: '#demoCourse'
            , id: 'myCourse'
            , height: 350
            , url: 'courseList.do'
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                , groups: 3
                , first: false
                , last: false
                , limit: 5
                , limits: [5, 8, 10, 15]
            }

            , cols: [[
                {field: 'id', title: '序号', width: 80, align: "center"}
                , {field: 'course_title', title: '标题', width: 220, sort: true, align: "center"}
                , {field: 'course_desc', title: '简介', width: 420, sort: true, align: "center"}
                , {fixed: 'right', title: '操作', width: 165, align: 'center', toolbar: '#barUpdate'}
            ]]
        });

        table.on('tool(demoCourse)', function (obj) {
            var data = obj.data
                , layEven = obj.event;

            if (layEven == 'del') {
                layer.confirm('真的要删除行吗', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        type: "get",
                        url: "deleteCourse.do",
                        data: {id: data.id},
                        dataType: "json",
                        success: function (data) {
                            if (data.code == 1) {
                                layer.msg("删除成功!", {
                                    icon: 6,
                                    time: 500
                                }, function () {
                                    table.reload('myCourse');// 重新加载页面,demo 表示父窗体table标签的id值
                                });
                            } else {
                                alert(data.info)
                            }
                        }
                    })
                })
            } else if (layEven == 'edit') {
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '修改课程'
                    , area: ['700px', '500px']
                    , content: 'updateCourse.html?id='+ data.id
                });
            }
        });

        $(".addVideo_btn").click(function () {
            var layer = layui.layer;
            layer.open({
                type: 2,
                title: '添加课程',
                shade: 0.8,
                area: ['700px', '500px'],
                content: 'addCourse.html'
            });

        })
    })

</script>
</body>
</html>